<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_head.html"; ?>



<h2>HTML 엘레먼트 작성 규칙</h2>

<h3>1. 문서형(Document Type Definition) 선언</h3>
<ul class="notice-txt">
	<li>문서형을 선언하지 않으면 브라우저 호환성을확보하지 못함. 문서형을 선언하는 것은 상호 운용성을 보장하기 위함이다.</li>
</ul>
<pre class="brush: js">
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</pre>
<h5>DTD 설정별 표준 문법으로 마크업 하더라도 Quirks Mode로 인식하여 바르게 해석되지 않은경우</h5>
<ul class="notice-txt">
	<li>DTD가 선언되지 않은 경우(html 태그로 문서시작)</li>
</ul>
<pre class="brush: js">
&lt;html>
</pre>
<ul class="notice-txt">
	<li>선언한 DTD 앞에 다른 문자가 오는경우</li>
</ul>
<pre class="brush: js">
&lt;!--  //html 문서 시작 -->
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</pre>




<h3>2. 언어 지정</h3>
<ul class="notice-txt">
	<li>lang 애트리뷰트는 User Agent가 언어를 올바로 해석할 수 있게 도와주며, 검색과 음성 장치에 활용된다.</li>
</ul>
<pre class="brush: js">
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
</pre>
<p class="cite">* 참고 : <a href="http://www.w3schools.com/tags/ref_language_codes.asp">ISO Language Codes</a></p>





<h3>3. &lt;head&gt; 구조</h3>
<ul class="notice-txt">
	<li>meta, title, link, script 순서로 엘리먼트를 선언.</li>
</ul>
<pre class="brush: js">
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
&lt;head>
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;title>타이틀&lt;/title>
&lt;link rel="stylesheet" type="text/css" href="/css/global.css" />
&lt;script type="text/javascript" src="/js/bsui.js">&lt;/script>
&lt;/head>
</pre>
<ul class="notice-txt">
	<li>script는 &lt;head>&lt;/head> 내에 선언하는 것을 원칙으로하며 단, 성능상의 이슈가 있으면 개발 부서와 협의하여 선언 위치를 변경 할수 있다.</li>
	<li><em>script language="javascript"</em> 애트리뷰트는 HTML4 이전 버전의 하위 호환성을 위해 사용하는 비표준 애트리뷰트로 사용하지 않는다.</li>
</ul>




<h3>4. 문자셋(charset) 지정</h3>
<ul class="notice-txt">
	<li>utf-8 인코딩 기본. DB의 인코딩 방식과도 관련이 있으므로 개발자와 협의하여 결정.</li>
</ul>
<pre class="brush: js">
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</pre>
<ul class="notice-txt">
	<li>utf-8은 다국어 지원이 가능하며, euc-kr 보다 표현 가능한 한글(고어, 음절 등)이 많음.</li>
	<li>한글은 utf-8에서 3바이트, euc-kr에서 2바이트를 차지하기 때문에 utf-8이 euc-kr에 비하여 DB 저장 용량이나 트래픽이 많을수 있음.</li>
</ul>




<h3>5. 구조와 표현의 분리</h3>
<ul class="notice-txt">
	<li>문서의 마크업 언어(HTML)와 화면 표시(CSS)언어를 본래의 목적에 맞게 최대한 분리한다.</li>
</ul>
<pre class="brush: js">
&lt;input type="text" id="myId" class="my-class" style="width:200px;" />
</pre>
<ul class="notice-txt">
	<li>특정 엘리먼트에 id, class, style을 선언할 때에 선언 순서는 엘리먼트의 기본 애트리뷰트 지정후 마지막에 id, class와 style을 선언한다.</li>
	<li>테이블 셀의 경우 다양한 너비의 고정폭을 지닐 수 있는데 이것을 모두 CSS로 지정하는 것은 기대했던 효과에 대한 이점이 없으므로 예외의 경우를 허용함</li>
	<li>input[text], select 엘리먼트의 경우 너비의 고정폭 지정 허용함</li>
</ul>




<h3>6. 온라인 서식의 구성</h3>
<ul class="notice-txt">
	<li>form, fieldset, legend, label, input, textarea, title 엘리먼트를 올바른 방법으로 사용한다.</li>
	<li>모든 form 엘리먼트는 action 애트리뷰트를 가지고 있어야 한다.</li>
	<li>모든 form 엘리먼트는 input[type="submit"], input[type="image"], button[type="submit"] 중 하나의 전송버튼을 반드시 제공해야 한다.</li>
	<li>탭(tab)키를 이용하여 서식 제어 요소 간을 이동할 경우에 그 순서가 왼쪽 위에서 오른쪽 아래 부분으로 순차적인 이동이 가능하여야 한다</li>
	<li>서식제어 엘리먼트와 레이블 엘리먼트가 서로 매칭되어야 한다.</li>
	<li>추가 정보 필요시 정확한 title 애트리뷰트를 제공하여야 한다. 또한 label 엘리먼트가 사용되지 못하는 서식제어 엘리먼트에도 title 애트리뷰트를 제공하여야 한다.</li>
</ul>

<h5>애트리뷰트 선언</h5>
<pre class="brush: js">
&lt;form action="">
&lt;fieldset>
	&lt;legend>예시&lt;/legend>
	&lt;input type="text" id="sampleId" title="텍스트필드" />
	&lt;input type="password" id="sampleId" title="텍스트필드" />
	&lt;input type="radio" name="sampleName" id="sampleId" title="선택버튼" />
	&lt;input type="checkbox" name="sampleName" id="sampleId" title="다중선택" />
	&lt;input type="image" src="url" alt="대체텍스트" />
	&lt;select title="콤보박스">
		&lt;option value="">&lt;/option>
		&lt;option value="">&lt;/option>
		&lt;option value="">&lt;/option>
	&lt;/select>
	&lt;textarea cols="10" rows="3" title="멀티텍스트">멀티텍스트&lt;/textarea>
	&lt;label for="">라벨&lt;/label>
&lt;/fieldset>
&lt;/form>
</pre>

<table class="tbl-type center" cellspacing="0" cellpadding="0" summary="애트리뷰트 선언">
	<col style="width:15%" /><col style="width:8%" /><col style="width:12%" /><col style="width:6%" /><col style="width:auto" />
	<thead>
		<tr>
			<th>엘리먼트 종류</th>
			<th>선언순서</th>
			<th>기본 값</th>
			<th>필수요소</th>
			<th>설명</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th rowspan="9">input[type=text],<br />input[type=password]</th>
			<td>type</td>
			<td>'text'</td>
			<td>○</td>
			<td class="align-l">필수 기본 속성</td>
		</tr>
		<tr>
			<td>id</td>
			<td>String</td>
			<td>△</td>
			<td class="align-l">label 이 지정된 경우 label 엘리먼트의 for 값과 동일한 id 를 명시</td>
		</tr>
		<tr>
			<td>title</td>
			<td>String</td>
			<td>△</td>
			<td class="align-l">label 엘리먼트가 지정되지 않은 경우 title 작성</td>
		</tr>
		<tr>
			<td>class</td>
			<td>String</td>
			<td></td>
			<td class="align-l">표현과 동작을 위한 클래스 사용가능</td>
		</tr>
		<tr>
			<td>style</td>
			<td>'width'</td>
			<td></td>
			<td class="align-l">css로 표현하지 못하는 예외 사항에서 width 속성을 사용하여 너비값을 작성</td>
		</tr>
		<tr>
			<td>value</td>
			<td>String</td>
			<td></td>
			<td class="align-l">-</td>
		</tr>
		<tr>
			<td>maxlength</td>
			<td>Number</td>
			<td></td>
			<td class="align-l">글자 수 제한</td>
		</tr>
		<tr>
			<td>readonly</td>
			<td>readonly</td>
			<td></td>
			<td class="align-l">읽기 전용</td>
		</tr>
		<tr>
			<td>disable</td>
			<td>disable</td>
			<td></td>
			<td class="align-l">비활성</td>
		</tr>
		<!-- <tr>
			<td>accesskey</td>
			<td>String</td>
			<td>X</td>
			<td class="align-l">단일 영문자(대문자 권장)</td>
		</tr> -->
		<tr>
			<th rowspan="7">input[type=radio],<br />input[type=checkbox]</th>
			<td>type</td>
			<td>'checkbox', 'radio'</td>
			<td>○</td>
			<td class="align-l">필수 기본 속성</td>
		</tr>
		<tr>
			<td>name</td>
			<td>String</td>
			<td>○</td>
			<td class="align-l">빈 값(또는 임시값)으로 넣어준다. 개발에서 처리한다.</td>
		</tr>
		<tr>
			<td>id</td>
			<td>String</td>
			<td>△</td>
			<td class="align-l">label 이 지정된 경우 label 엘리먼트의 for 값과 동일한 id 를 명시</td>
		</tr>
		<tr>
			<td>title</td>
			<td>대체 텍스트</td>
			<td>△</td>
			<td class="align-l">label 엘리먼트가 지정되지 않은 경우 title 작성</td>
		</tr>
		<tr>
			<td>class</td>
			<td>String</td>
			<td></td>
			<td class="align-l">표현과 동작을 위한 클래스 사용가능</td>
		</tr>
		<tr>
			<td>checked</td>
			<td>'checked'</td>
			<td></td>
			<td class="align-l">체크상태</td>
		</tr>
		<tr>
			<td>etc</td>
			<td>해당 속성 값</td>
			<td></td>
			<td class="align-l">옵션 애트리뷰트는 마지막 애트리부트 이후에 순서에 상관없이 사용한다.</td>
		</tr>
		<tr>
			<th rowspan="5">input[type=image]</th>
			<td>type</td>
			<td>'image'</td>
			<td>○</td>
			<td class="align-l">필수 지정 속성</td>
		</tr>
		<tr>
			<td>src</td>
			<td>String</td>
			<td>○</td>
			<td class="align-l">이미지 경로</td>
		</tr>
		<tr>
			<td>alt</td>
			<td>String</td>
			<td>○</td>
			<td class="align-l">대체 텍스트</td>
		</tr>
		<tr>
			<td>class</td>
			<td>String</td>
			<td></td>
			<td class="align-l">표현과 동작을 위한 클래스 사용가능</td>
		</tr>
		<tr>
			<td>etc</td>
			<td>해당 속성 값</td>
			<td></td>
			<td class="align-l">옵션 애트리뷰트는 마지막 애트리부트 이후에 순서에 상관없이 사용한다.</td>
		</tr>
		<tr>
			<th rowspan="5">select</th>
			<td>title</td>
			<td>String</td>
			<td>○</td>
			<td class="align-l">대체 텍스트</td>
		</tr>
		<tr>
			<td>id</td>
			<td>String</td>
			<td>△</td>
			<td class="align-l">명시적으로 label 엘리먼트가 지정된 경우 반드시 lebel 엘리먼트의 id 애트리뷰트의 값을 작성한다.</td>
		</tr>
		<tr>
			<td>class</td>
			<td>String</td>
			<td></td>
			<td class="align-l">표현과 동작을 위한 클래스 사용가능</td>
		</tr>
		<tr>
			<td>style</td>
			<td>이미지 경로</td>
			<td></td>
			<td class="align-l">기본은 auto 값으로 예외 상황의 경우 width 속성을 사용하여 너비 값을 작성한다.</td>
		</tr>
		<tr>
			<td>etc</td>
			<td>해당 속성 값</td>
			<td></td>
			<td class="align-l">옵션 애트리뷰트는 마지막 애트리부트 이후에 순서에 상관없이 사용한다.</td>
		</tr>
		<tr>
			<th rowspan="6">textarea</th>
			<td>cols</td>
			<td>Number</td>
			<td>○</td>
			<td class="align-l">기본값으로 10 지정</td>
		</tr>
		<tr>
			<td>rows</td>
			<td>Number</td>
			<td>○</td>
			<td class="align-l">기본값으로 3 지정</td>
		</tr>
		<tr>
			<td>title</td>
			<td>String</td>
			<td>△</td>
			<td class="align-l">대체 텍스트</td>
		</tr>
		<tr>
			<td>class</td>
			<td>String</td>
			<td></td>
			<td class="align-l">표현과 동작을 위한 클래스 사용가능</td>
		</tr>
		<tr>
			<td>style</td>
			<td>'width'</td>
			<td></td>
			<td class="align-l">css로 표현하지 못하는 예외 사항에서 width 속성을 사용하여 너비값을 작성한다.</td>
		</tr>
		<tr>
			<td>etc</td>
			<td>해당 속성 값</td>
			<td></td>
			<td class="align-l">옵션 애트리뷰트는 마지막 애트리부트 이후에 순서에 상관없이 사용한다.</td>
		</tr>
		<tr>
			<th rowspan="2">label</th>
			<td>for</td>
			<td>String</td>
			<td>○</td>
			<td class="align-l">for 애트리뷰트의 값과 라이오 버튼(input type="radio"), 체크 박스(input type="checkbox")의 id 애트리뷰트 값과 동일한 이름으로 연결하며 명시적 사용을 권장한다.</td>
		</tr>
		<tr>
			<td>class</td>
			<td>String</td>
			<td></td>
			<td class="align-l">-</td>
		</tr>
	</tbody>
</table>




<h3>7. 텍스트 버튼</h3>
<p>웹 페이지에서 사용되는 Button은 그 목적에 따라 명확하게 3가지로 구분할 수 있으며 HTML 마크업은 각각 다릅니다.<br />
자원을 참조하기 위한 a 엘리먼트, 인터페이스 조작을 위한 button 엘리먼트, 서식 전송을 위한 input 엘리먼트가 바로 그것입니다.</p>

<ul class="notice-txt">
	<li>a : URI를 ‘연결‘하기 위한 버튼으로서 &lt;a href="#uri"&gt; 형식으로 마크업 합니다.</li>
	<li>button : URI를 연결하지 않고 단순하게 사용자 인터페이스만를 ‘조작‘하기 위한 버튼으로서 &lt;button type="button"&gt; 엘리먼트로 마크업 합니다. type을 명시하지 않으면 어떤 브라우저는 Form Submit 기능을 실행하기 때문에 반드시 type 속성을 button으로 지정해 주어야 합니다.</li>
	<li>input : 사용자의 입력을 서버로 ‘전송‘하기 위한 버튼으로서 &lt;input type="submit"&gt;, &lt;button type="submit"&gt; 엘리먼트로 마크업 합니다.</li>
</ul>

* 참고 : <a href="http://naradesign.net/wp/2008/10/31/203/" target="_blank">CSS Text Button Design</a>

<table class="tbl-type center" cellspacing="0">
	<caption>HTML Markup</caption>
	<colgroup>
		<col style="width:20%" />
		<col style="width:auto" />
		<col style="width:20%" />
	</colgroup>
	<thead>
		<tr>
			<th scope="col">Element</th>
			<th scope="col">Markup</th>
			<th scope="col">Result</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">a</th>
			<td><code>&lt;span class=&quot;button&quot;&gt;<strong>&lt;a href=&quot;#&quot;&gt;</strong>TEXT<strong>&lt;/a&gt;</strong>&lt;/span&gt;</code></td>
			<td><span class="button"><a href="#">TEXT</a></span></td>
		</tr>
		<tr>
			<th scope="row">button</th>
			<td><code>&lt;span class="button"&gt;<strong>&lt;button type="button"&gt;</strong>TEXT<strong>&lt;/button&gt;</strong>&lt;/span&gt;</code></td>
			<td><span class="button"><button type="button">TEXT</button></span></td>
		</tr>
		<tr>
			<th scope="row">input</th>
			<td><code>&lt;span class="button"&gt;<strong>&lt;input type="submit" value="TEXT" /&gt;</strong>&lt;/span&gt;</code></td>
			<td><span class="button"><input type="submit" value="TEXT" /></span></td>
		</tr>
	</tbody>
</table>

<h3>8. table 엘리먼트 사용 방법</h3>
<ul class="notice-txt">
	<li>레이아웃을 표현하기 위하여 표를 사용하지 않는다. 부득이 사용해야 하는 경우 제목, 요약정보, th셀을 제공하지 않는다.</li>
</ul>
<h5>올바른 테이블 사용 방법</h5>
<table class="tbl-type" cellspacing="0" summary="예금종류, 계좌번호, 계좌별명, 잔액, 최종거래일의 순서로 전계좌조회 목록을 나타낸 표입니다.">
	<caption>전계좌조회</caption>
	<colgroup>
		<col style="width:15%" />
		<col style="width:auto" />
		<col style="width:20%" />
		<col style="width:20%" />
		<col style="width:20%" />
	</colgroup>
	<thead>
		<tr>
			<th scope="col">예금종류</th>
			<th scope="col">계좌번호</th>
			<th scope="col">계좌별명</th>
			<th scope="col">잔액</th>
			<th scope="col">최종거래일</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th scope="row">예금 총 잔액</th>
			<td colspan="4">백원만</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="row">우리닷컴통장</th>
			<td>1002-432-123456</td>
			<td>급여통장</td>
			<td>225,025,006</td>
			<td>2009-10-11</td>
		</tr>
		<tr>
			<th scope="row">저축예금</th>
			<td>1002-332-123456</td>
			<td>지출통장</td>
			<td>100</td>
			<td>2010-10-11</td>
		</tr>
	</tbody>
</table>
<pre class="brush: js;">
&lt;table class="tbl-type" cellspacing="0" summary="예금종류, 계좌번호, 계좌별명, 잔액, 최종거래일의 순서로 전계좌조회 목록을 나타낸 표입니다.">
	&lt;caption>전계좌조회&lt;/caption>
	&lt;colgroup>
		&lt;col style="width:15%" />
		&lt;col style="width:auto" />
		&lt;col style="width:20%" />
		&lt;col style="width:20%" />
		&lt;col style="width:20%" />
	&lt;/colgroup>
	&lt;thead>
		&lt;tr>
			&lt;th scope="col">예금종류&lt;/th>
			&lt;th scope="col">계좌번호&lt;/th>
			&lt;th scope="col">계좌별명&lt;/th>
			&lt;th scope="col">잔액&lt;/th>
			&lt;th scope="col">최종거래일&lt;/th>
		&lt;/tr>
	&lt;/thead>
	&lt;tfoot>
		&lt;tr>
			&lt;th scope="row">예금 총 잔액&lt;/th>
			&lt;td colspan="4">백원만&lt;/td>
		&lt;/tr>
	&lt;/tfoot>
	&lt;tbody>
		&lt;tr>
			&lt;th scope="row">우리닷컴통장&lt;/th>
			&lt;td>1002-432-123456&lt;/td>
			&lt;td>급여통장&lt;/td>
			&lt;td>225,025,006&lt;/td>
			&lt;td>2009-10-11&lt;/td>
		&lt;/tr>
		&lt;tr>
			&lt;th scope="row">저축예금&lt;/th>
			&lt;td>1002-332-123456&lt;/td>
			&lt;td>지출통장&lt;/td>
			&lt;td>100&lt;/td>
			&lt;td>2010-10-11&lt;/td>
		&lt;/tr>
	&lt;/tbody>
&lt;/table>
</pre>
<ul class="notice-txt">
	<li>table 엘리먼트의 애트리뷰트 지정 순서는 cellspacing(for ie7), summay 이며 border 값은 클래스를 지정하여 사용한다.</li>
	<li>caption 엘리먼트는 표의 제목을 표현하며 표의 윗부분에 헤딩 엘리먼트로 대체 가능하다.</li>
	<li>디자인에 머리글이 제공되어 있지 않더라도 반드시 머리글을 제공한다. </li>
	<li>행 제목과 열 제목이 있는 경우 이에 대한 scope 애트리뷰트를 사용하여 행과 열의 범위를 적절히 구분하여 배치한다.</li>
</ul>




<h3>9. 엘리먼트의 기본 애트리뷰트 지정 순서</h3>
<ul class="notice-txt">
	<li>User Interface 의 동작이 요구되면 id 애트리 뷰트를 선택적으로 사용할 수 있으며 위치는 기본 애트리뷰트의 지정후 다음에 위치한다.<br />
	class 애트리뷰트는 가장 마지막에 작성한다. id와 class의 사용여부는 선택 사항이다.<br />
	애트리 뷰트의 지정순서는 아래의 예제와 같으며 여기서 언급 하지 않은 엘리먼트는 알파벳 순서로 애트리뷰트를 작성한다.</li>
</ul>
<h5>a 엘리먼트</h5>
<pre class="brush: js">
&lt;a href="#none" title="새창으로열림" target="_blank">인쇄하기&lt;/a>
</pre>
<ul class="notice-txt">
	<li><em>href 애트리뷰트의 값은 #none</em>로 한다.
		앵커 기능이 있다면 해당 엘리먼트의 id값을 작성한다.</li>
	<li>새 창으로 페이지를 표시해야 할 경우 target 애트리뷰트를 선택적으로 사용한다.</li>
	<li>링크의 목표가 명확하지 않은 경우 title 애트리뷰트의 값으로 부가적인 설명을 제공한다.</li>
</ul>
<h5>iframe 엘리먼트</h5>
<pre class="brush: js">
&lt;iframe frameborder="0" width="100%" height="100%" scrolling="no" src="about:blank" title="환율차트">&lt;/iframe>
</pre>
<ul class="notice-txt">
	<li>iframe 사용은 페이지 성능에 영향을 주시 때문에 가급적 사용을 하지 않는다.</li>
	<li>title 애트리뷰트는 반드시 제공되어야 하며 빈 값을 사용하지 않는다.</li>
	<li>iframe을 포함하는 페이지의 도메인과 iframe에서 불러오는 페이지의 도메인이 다르면, 크로스 도메인 설정을 위해 별도의 소스 코드가 추가되어 성능의 영향을 줄 수 있다</li>
	<li>iframe의 높이값이 iframe에서 불러오는 콘텐츠의 따라 유동적이어야 한다면 별도의 소스 코드가 추가되어 성능에 영향을 줄 수있다.</li>
	<li>iframe은 가장 마지막으로 로딩되기 때문에 페이지 로딩 초기에는 화면이 비어 보일 수 있다.</li>
</ul>
<h5>img 엘리먼트</h5>
<pre class="brush: js">
&lt;img src="img.gif" alt="대체텍스트" title="" />
</pre>
<ul class="notice-txt">
	<li>alt 애트리뷰트는 반드시 제공되어야 하며, 의미없는 이미지일 경우 빈 값으로 둔다.</li>
	<li>alt 값보다 부가적인 설명이 필요할 경우 title 값을 제공한다(alt 사용으로 일부 브라우저에서 말 풍선이 나타는 경우를 방지하기 위해서 title 을 빈값으로 둔다)</li>
	<li>이미지 맵 사용을 지양하며 포지셔닝 방법을 사용한다.</li>
</ul>






<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_foot.html"; ?>